<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { getAboutMeAPI, searchApi } from '../apis/apis.js'
import { RouterLink } from 'vue-router';

// 是否展示搜索框 从layout注入
const dialogTableVisible = inject('dialogTableVisible')
// 输入关键词
const input = ref('')
// 总页数
const total = ref(0)
// 当前页
const current = ref(1)
// 搜索结果列表
const list = ref()
// 加载框
const loading = ref(false)

// 当前页改变
const pageChange = async (num) => {
  loading.value = true
  if (input.value === '') return
  const params = {
    keyword: input.value,
    page: num,
  }
  const res = await searchApi(params)
  total.value = res.data.total
  list.value = res.data.pageList
  loading.value = false
}
// 搜索
const search = async () => {
  loading.value = true
  if (input.value === '') {
    loading.value = false
    return
  }
  const params = {
    keyword: input.value,
    page: current.value
  }
  const res = await searchApi(params)
  total.value = res.data.total
  list.value = res.data.pageList
  loading.value = false
}

</script>
<template>
  <div>
    <el-dialog
      class="bg-gray-50 w-1/2"
      v-model="dialogTableVisible"
      :show-close="false"
      width="800"
    >
      <template #header="{ close }">
        <div class="flex items-center justify-between -ml-5 -mr-9 -mt-5 pt-1 bg-white">
          <div class="flex pr-3 items-center space-x-2 w-full">
            <div class="pl-2 flex items-center">
              <svg
                t="1710505257573"
                class="w-6 h-6"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M711.04 662.016l192.448 192.448a34.688 34.688 0 0 1-48.96 49.056l-192.512-192.48a345.216 345.216 0 0 1-219.392 78.24C251.2 789.28 96 634.08 96 442.624 96 251.2 251.2 96 442.624 96c191.456 0 346.656 155.2 346.656 346.624 0 83.232-29.344 159.616-78.24 219.392z m-268.416 57.92a277.312 277.312 0 1 0 0-554.624 277.312 277.312 0 0 0 0 554.624z"
                  fill="#666666"
                ></path>
              </svg>
            </div>
            <el-input
              @input="search"
              style="max-width: 40rem"
              autofocus
              v-model="input"
              placeholder="搜索..."
            />
          </div>
          <div
            type="danger"
            @click="close"
            class="w-auto flex items-center pr-3"
          >
            <svg
              class="w-10 h-10 hover:scale-110 ease-in-out duration-200"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M514.540358 229.080395c-156.473751 0-283.313577 126.83778-283.313577 283.312554 0 156.472727 126.839827 283.312554 283.313577 283.312554 156.471704 0 283.311531-126.839827 283.311531-283.312554C797.852912 355.918175 671.012062 229.080395 514.540358 229.080395zM651.585617 627.182322l-22.258956 22.25691L514.540358 534.648836 399.749962 649.439232l-22.25691-22.25691L492.281401 512.39295 377.493052 397.6046l22.25691-22.25691 114.790396 114.789373L629.326661 375.34769l22.258956 22.25691L536.795221 512.39295 651.585617 627.182322z"
                fill="#515151"
              ></path>
            </svg>
          </div>
        </div>
      </template>

      <el-scrollbar
        v-loading="loading"
        class="w-full -mt-10"
      >
        <div
          style="height: 25rem;"
          class="flex flex-col space-y-4 px-2"
        >
          <div
            @click="dialogTableVisible = false"
            v-for="(item, index) in list"
            :key="item.id"
          >
            <RouterLink :to="{ path: '/detail/' + item.id }">
              <div class="px-2 tracking-widest mb-2">
                <div class="pb-2">
                  <div class="font-semibold text-gray-700 text-xl">
                    {{ (index + 1)+((current-1) * 5) }}.
                    <span
                      v-html="item.title"
                      class="text-xl border-b font-semibold text-gray-700 border-dotted border-black  mb-2"
                    >
                    </span>
                  </div>
                </div>
                <div
                  v-html="item.simple"
                  class="mx-3 pb-3 pt-1 leading-7 text-md  border-b border-dotted border-gray-600"
                >
                </div>
              </div>
            </RouterLink>
          </div>
        </div>
      </el-scrollbar>

      <div class="bg-white py-0.5 flex flex-col items-center justify-center -mb-7 -mx-5">
        <div class="mx-auto pt-1">
          <el-pagination
            :page-size="5"
            layout="prev, pager, next"
            v-model:current-page="current"
            :total="total"
            @current-change="pageChange"
          >
          </el-pagination>
        </div>
        <div class="px-3 flex items-center justify-between tracking-widest self-start w-full -mt-1 text-sm font-mono">
          <div>
            共搜索到 {{ total > 0 ? total : 0 }} 条结果
          </div>
          <div class="px-3 flex items-center">
            <div class="px-3 text-xs">
              搜索引擎
            </div>
            <svg
              viewBox="0 0 140 32"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              aria-label="Algolia Logo"
              class="w-20 "
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M67.182 18.164V.378a.378.378 0 0 0-.436-.373l-3.227.507a.377.377 0 0 0-.319.374l.011 18.03c0 .826 0 5.932 6.138 6.11a.379.379 0 0 0 .39-.377v-2.61a.374.374 0 0 0-.327-.373c-2.229-.257-2.229-3.045-2.229-3.502ZM120.4 7.25h-3.247a.378.378 0 0 0-.377.378v17.029c0 .209.169.378.377.378h3.247c.209 0 .378-.17.378-.378V7.626a.378.378 0 0 0-.378-.377Zm-.136-2.68h-3.247a.378.378 0 0 1-.378-.378V.887c0-.187.135-.345.319-.374l3.247-.508a.378.378 0 0 1 .436.373v3.813a.378.378 0 0 1-.377.378Zm-8.723 13.595V.378a.378.378 0 0 0-.436-.373l-3.226.507a.377.377 0 0 0-.319.374l.011 18.03c0 .826 0 5.932 6.138 6.11a.38.38 0 0 0 .39-.377v-2.61a.375.375 0 0 0-.328-.373c-2.228-.257-2.228-3.045-2.228-3.502h-.002ZM100.487 7.868c1.019.426 1.894 1.027 2.607 1.812h.002c.722.783 1.282 1.72 1.69 2.818.427 1.098.641 2.391.641 3.735 0 1.342-.193 2.358-.591 3.469-.396 1.107-.957 2.054-1.679 2.838a7.423 7.423 0 0 1-2.608 1.821c-1.018.427-2.587.671-3.37.671-.786-.01-2.342-.233-3.351-.67a7.587 7.587 0 0 1-2.597-1.822c-.724-.784-1.284-1.73-1.691-2.838-.407-1.11-.611-2.126-.611-3.47 0-1.343.183-2.636.59-3.734.408-1.1.977-2.035 1.71-2.818a7.639 7.639 0 0 1 2.607-1.812c1.009-.427 2.12-.63 3.32-.63 1.203 0 2.312.213 3.331.63Zm-3.309 13.807c1.313 0 2.342-.508 3.076-1.516h.001c.733-1.018 1.099-2.176 1.099-3.917 0-1.72-.378-3.153-1.111-4.15-.734-1.008-1.763-1.506-3.075-1.506-1.313 0-2.342.498-3.074 1.505-.734 1.006-1.09 2.431-1.09 4.151 0 1.74.366 2.909 1.1 3.917.733 1.017 1.76 1.516 3.074 1.516ZM55.93 7.25h-3.154c-3.093 0-5.814 1.631-7.404 4.102a9.294 9.294 0 0 0-1.47 5.039A9.228 9.228 0 0 0 47.2 23.5c.189.167.388.318.596.457a5.148 5.148 0 0 0 2.848.863c.077 0 .154-.003.231-.006h.031l.02-.002.009-.001.014-.001.026-.002.03-.002.111-.008.032-.004.018-.002.016-.001.174-.022a.353.353 0 0 0 .04-.007c2.103-.324 3.936-1.972 4.533-4.02v3.701c0 .209.17.378.378.378h3.224c.208 0 .377-.17.377-.378V7.627a.378.378 0 0 0-.377-.378h-3.6Zm0 13.242c-.78.651-1.789.895-2.868.969l-.016.001-.016.002c-.07.004-.143.006-.215.006-2.702 0-4.932-2.297-4.932-5.08 0-.655.126-1.28.347-1.854.717-1.864 2.48-3.184 4.544-3.184h3.154v9.14h.002ZM135.198 7.25h3.601c.209 0 .378.17.378.378v16.816a.378.378 0 0 1-.378.378h-3.223a.378.378 0 0 1-.378-.378v-3.7c-.597 2.047-2.43 3.695-4.534 4.02a.467.467 0 0 1-.039.006l-.175.022-.035.003-.03.004a3.065 3.065 0 0 1-.112.008l-.056.004-.023.002a.565.565 0 0 1-.045.002h-.004c-.078.003-.154.006-.232.006a5.147 5.147 0 0 1-2.847-.863 5.478 5.478 0 0 1-.596-.457 9.228 9.228 0 0 1-3.299-7.11c0-1.864.543-3.595 1.471-5.04 1.59-2.47 4.31-4.1 7.403-4.1h3.153Zm-2.867 14.21c1.08-.073 2.089-.317 2.868-.968h-.001v-9.14h-3.154c-2.065 0-3.828 1.32-4.545 3.183a5.153 5.153 0 0 0-.346 1.856c0 2.782 2.23 5.08 4.932 5.08.072 0 .144-.003.215-.007l.016-.002a.162.162 0 0 1 .012-.001h.003ZM82.765 7.25h-3.154c-3.093 0-5.814 1.631-7.403 4.102a9.259 9.259 0 0 0-1.47 5.037c0 .35.02.714.059 1.061a9.198 9.198 0 0 0 3.24 6.049c.188.166.387.318.596.457a5.147 5.147 0 0 0 5.927-.16c1.04-.74 1.846-1.826 2.205-3.055v3.216h-.007v.164c0 1.397-.365 2.45-1.11 3.159-.742.71-1.984 1.064-3.725 1.064a31.3 31.3 0 0 1-2.98-.154.378.378 0 0 0-.4.27l-.818 2.76a.378.378 0 0 0 .31.48c1.376.199 2.719.301 3.494.301 3.127 0 5.446-.688 6.964-2.061 1.374-1.243 2.12-3.13 2.25-5.665V7.626a.378.378 0 0 0-.377-.378h-3.601v.001Zm0 4.102s.04 8.903 0 9.175c-.773.624-1.734.868-2.782.94l-.016.002a3.738 3.738 0 0 1-.483.001c-2.584-.135-4.765-2.384-4.765-5.08 0-.655.125-1.28.346-1.854.717-1.864 2.48-3.184 4.544-3.184h3.157ZM.002 15.754C.129 7.046 7.257 0 15.999 0h15.392c.336 0 .607.272.607.607V31.36a.64.64 0 0 1-1.063.477l-9.623-8.524a9.018 9.018 0 0 1-5.516 1.724c-4.937-.109-8.983-4.362-8.85-9.296.139-5.062 4.457-9.1 9.624-8.783 4.507.277 8.156 3.899 8.464 8.4.055.79.006 1.56-.132 2.299a.375.375 0 0 1-.617.21l-1.918-1.699a1.074 1.074 0 0 1-.354-.712A6.045 6.045 0 0 0 16 9.955c-3.482 0-6.285 2.962-6.02 6.497.223 2.964 2.627 5.352 5.594 5.556a6.033 6.033 0 0 0 5.247-2.39.543.543 0 0 1 .796-.084l7.364 6.54V3.015H16C8.911 3.016 3.132 8.722 3.02 15.78c-.115 7.146 5.665 13.093 12.816 13.18 1.826.022 3.6-.331 5.232-1.025a1.057 1.057 0 0 1 1.11.187l1.498 1.326a.374.374 0 0 1-.07.608 15.889 15.889 0 0 1-7.703 1.922c-8.85-.05-16.03-7.38-15.902-16.223Z"
                fill="#003DFF"
              ></path>
            </svg>
          </div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>


<style></style>
